<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
		<title>Psychology Manage System</title>

		<!-- Favicon -->
		<link rel="shortcut icon" href="assets/img/favicon.png">

		<link rel="stylesheet" href="assets/css/element.css">
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="assets/css/bootstrap.min.css">

		<!-- Fontawesome CSS -->
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
		<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">


		<!-- Main CSS -->
		<link rel="stylesheet" href="assets/css/style.css">

		<script src="assets/js/vue.js"></script>
		<script src="assets/js/axios.js"></script>
		<script src="assets/util/localStorageUtil.js"></script>
		<script src="assets/util/request.js"></script>
		<script src="assets/util/common.js"></script>
		<script src="assets/js/element.js"></script>


		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.min.js"></script>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>

		<!-- Main Wrapper -->
		<div class="main-wrapper" id="dimensiondetail">

			<!-- Header -->
			<div class="header">

				<!-- Logo -->
				<div class="header-left">
					<a href="profile.html" class="logo">
						<img src="assets/img/logo.png" alt="Logo">
					</a>
					<a href="profile.html" class="logo logo-small">
						<img src="assets/img/logo-small.png" alt="Logo" width="30" height="30">
					</a>
				</div>
				<!-- /Logo -->

				<!-- Sidebar Toggle -->
				<a href="javascript:void(0);" id="toggle_btn">
					<i class="fas fa-bars"></i>
				</a>
				<!-- /Sidebar Toggle -->


				<!-- Mobile Menu Toggle -->
				<a class="mobile_btn" id="mobile_btn">
					<i class="fas fa-bars"></i>
				</a>
				<!-- /Mobile Menu Toggle -->

				<!-- Header Menu -->
				<ul class="nav user-menu">

					<!-- Flag -->
					<li class="nav-item dropdown has-arrow flag-nav">
						<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">
							<img src="assets/img/flags/zh.png" alt="" height="20"> <span>简体中文</span>
						</a>
						<div class="dropdown-menu dropdown-menu-right">
							<a href="javascript:void(0);" class="dropdown-item">
								<img src="assets/img/flags/zh.png" alt="" height="16"> 简体中文
							</a>
						</div>
					</li>
					<!-- /Flag -->

					<!-- User Menu -->
					<li class="nav-item dropdown has-arrow main-drop">
						<a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img">
								<img :src="userinfo.figureUrl==='' ? 'assets/img/logo-small.png': userinfo.figureUrl " alt="">
								<span class="status online"></span>
							</span>
							<span v-html="userinfo.nickname"></span>
						</a>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="profile.html"><i data-feather="user" class="mr-1"></i> 个人中心</a>
							<button class="dropdown-item" onclick="logout()"><i data-feather="log-out" class="mr-1"></i> 注销</button>
						</div>
					</li>
					<!-- /User Menu -->

				</ul>
				<!-- /Header Menu -->

			</div>
			<!-- /Header -->

			<!-- Sidebar -->
			<div class="sidebar" id="sidebar">
				<div class="sidebar-inner slimscroll">
					<div id="sidebar-menu" class="sidebar-menu" >
						<ul id="sidebarMenu">
						</ul>
					</div>
				</div>
			</div>
			<!-- /Sidebar -->

			<!-- Page Wrapper -->
			<div class="page-wrapper">
				<div class="content container-fluid">

					<!-- Page Header -->
					<div class="page-header">
						<div class="row align-items-center">
							<div class="col">
								<h3 class="page-title">测试/题库管理</h3>
								<ul class="breadcrumb">
									<li class="breadcrumb-item"><a href="profile.html">个人中心</a></li>
									<li class="breadcrumb-item"><a href="dimension.html">维度管理</a></li>
									<li class="breadcrumb-item active">维度详情({{this.dimensionName}})</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- /Page Header -->


					<!-- /Search Filter -->

					<div class="row">
						<div class="col-sm-12">
							<div class="card card-table" style="background-color: #c1cfee">
								<div class="card-body">
									<div class="table-responsive" >
										<el-table v-loading="loading" :data="questionList" style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
											<el-table-column type="expand">
												<template slot-scope="props">
													<el-table :data="props.row.optionList" border style="width: 100%" >
														<el-table-column
																type="index"
																width="50">
														</el-table-column>
														<el-table-column
																prop="optionCode"
																label="选项编码"
														>
														</el-table-column>
														<el-table-column
																prop="optionName"
																label="描述"
														>
														</el-table-column>
														<el-table-column
																prop="optionScore"
																label="选项分数"
														>
														</el-table-column>
													</el-table>
												</template>
											</el-table-column>
											<el-table-column
													type="index"
													width="50">
											</el-table-column>
											<el-table-column
													prop="questionName"
													label="问题描述"
											>
											</el-table-column>
<!--											<el-table-column-->
<!--													prop="dimensionName"-->
<!--													label="所属维度"-->
<!--											>-->
<!--											</el-table-column>-->
<!--											<el-table-column-->
<!--													prop="scaleTypeName"-->
<!--													label="所属大类"-->
<!--											>-->
<!--											</el-table-column>-->
<!--											<el-table-column-->
<!--													prop="createDate"-->
<!--													label="创建时间"-->
<!--											>-->
<!--											</el-table-column>-->
<!--											<el-table-column-->
<!--													prop="updateDate"-->
<!--													label="更新时间"-->
<!--											>-->
<!--											</el-table-column>-->


										</el-table>
<!--										<h5 style="margin-left: 2%;margin-top: 1%"><strong>评判规则</strong></h5>-->
										<el-table :data="judgeList" style="width: 100%" >
											<el-table-column
													type="index"
													width="50">
											</el-table-column>
											<el-table-column
													prop="judgeName"
													label="评判描述"
											>
											</el-table-column>
											<el-table-column  label="分数范围" width="200px">
												<template slot-scope="scope">
													<span>{{scope.row.startScore}}</span><span> - </span>
													<span>{{scope.row.endScore}}</span>
												</template>
											</el-table-column>
										</el-table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /Page Wrapper -->

		</div>
		<!-- /Main Wrapper -->

		<!-- jQuery -->
		<script src="assets/js/jquery-3.5.1.min.js"></script>

		<!-- Bootstrap Core JS -->
		<script src="assets/js/popper.min.js"></script>
		<script src="assets/js/bootstrap.min.js"></script>

		<!-- Feather Icon JS -->
		<script src="assets/js/feather.min.js"></script>

		<!-- Slimscroll JS -->
		<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>

		<!-- Custom JS -->
		<script src="assets/js/script.js"></script>

	</body>

<script>
	let storage = new Storage();

	var dimensiondetail = new Vue({
		el: '#dimensiondetail',
		data() {
			return {
				//初始页
				userinfo: '',
				dimensionName: '',
				activePage: '/dimension.html',
				questionList:[],
				judgeList:[],
				loading: false
			}
		},
		methods: {
			getUserInfo() {
				//设置用户信息
				if(storage.getItem("userinfo")!=null){
					this.userinfo = storage.getItem("userinfo");
					initMenu(storage.getItem("routeMap"),this.activePage)
				}else{
					service.get("/user/getUserInfo").then(res=>{
						storage.setItem({
							name: "userinfo",
							value: res.data.userinfo
						})
						storage.setItem({
							name: "routeMap",
							value: res.data.routeMap
						})
						initMenu(res.data.routeMap,this.activePage)
						this.userinfo = res.data;
					});
				}
			},
			async getQuestionDetail() {
				// var scaleId = window.location.href.split("?")[1].split("&")[0].split("=")[1];
				// this.scaleName = window.location.href.split("?")[1].split("&")[1].split("=")[1];

				var dimensionId = getParam("dimensionId");
				this.dimensionName = getParam("dimensionName")

				this.loading = true
				await service({
					method: "get",
					url: "/dimension/getDimensionQuestionDetail?dimensionId="+dimensionId,
				}).then(res => {
					this.questionList = res.data.detailList
					this.judgeList = res.data.judgeList
				}).finally(()=>{
					this.loading = false
				})
			},

		},
		created(){
			this.getQuestionDetail(this.pageNum,this.pageSize,false)
		},
		mounted() {
			intThisPoint(this);
			this.getUserInfo();
		},
	})





</script>
</html>
